<div class="widgets">
  <div class="row">
    <div class="col-md-3">
      <sa-card title="Flat Buttons" baCardClass="with-scroll button-panel">
        <box-flat-buttons></box-flat-buttons>
      </sa-card>
    </div>
    <div class="col-md-3">
      <sa-card title="Raised Buttons" baCardClass="with-scroll button-panel">
        <box-raised-buttons></box-raised-buttons>
      </sa-card>
    </div>
    <div class="col-md-3">
      <sa-card title="Different Sizes" baCardClass="with-scroll button-panel df-size-button-panel">
        <box-sized-buttons></box-sized-buttons>
      </sa-card>
    </div>
    <div class="col-md-3">
      <sa-card title="Disabled" baCardClass="with-scroll button-panel">
        <box-disabled-buttons></box-disabled-buttons>
      </sa-card>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <sa-card title="Icon Buttons" baCardClass="with-scroll">
        <box-icon-buttons></box-icon-buttons>
      </sa-card>
      <sa-card title="Large Buttons" baCardClass="with-scroll large-buttons-panel">
        <box-large-buttons></box-large-buttons>
      </sa-card>
    </div>
    <div class="col-md-6">
      <sa-card title="Button Dropdowns" baCardClass="with-scroll">
        <box-dropdown-buttons></box-dropdown-buttons>
      </sa-card>
      <sa-card title="Button Groups" baCardClass="with-scroll">
        <box-group-buttons></box-group-buttons>
      </sa-card>
    </div>
  </div>

  <div class="row">
    <div
      class="col-md-12"
      sa-panel
      sa-panel-title="Progress Buttons"
      sa-panel-class="with-scroll"
    >
      <div ng-include="'app/pages/ui/buttons/widgets/progressButtons.html'"></div>
    </div>
  </div>
</div>
